<template>
  <div class="app-container home">
    <!-- <h1>云商竞购管理系统</h1> -->

    <div class="charts-item">
      <chart-box class="charts" :options="mapOptions"></chart-box>
    </div>


    <div class="home-top">
      <div class="top-title"> 日活跃用户TOP10</div>
      <div v-for="(item,index) in this.list" :key="index">
        <div class="top-item"> <span class="top-name">{{index+1}}.{{item.userId}} </span> --- {{(item.pv/3).toFixed(0)}}</div>
      </div>
    </div>

  </div>
</template>

<script>
import { listGetProvince, getVisitTop10 } from "@/api/home/index";
import ChartBox from "@/components/charts";
import { homeMapChart, testOp } from './home/chart.js'

export default {
  name: "Index",
  components: { ChartBox },
  data() {
    return {
      loading: false,
      mapOptions: [],
      list: []
    };
  },
  created() {
    this.getList();
  },
  methods: {
    getList() {
      this.loading = true;
      listGetProvince()
        .then((response) => {
          if (response.code == 200) {
            // this.goodsList = response.data;
            let list = response.data;
            let count = 0;
            list.forEach(item => {
              item.value = item.uv;
              count += item.value;
            });
            this.mapOptions = homeMapChart(list);

          }
          this.loading = false;
        })
        .catch((err) => {
          this.loading = false;
        });


      getVisitTop10()
        .then((response) => {
          if (response.code == 200) {
            this.list = response.data;
          }
        })
        .catch((err) => {
        });
    },

    goTarget(href) {
      window.open(href, "_blank");
    },
  },
};
</script>

<style scoped lang="scss">
.home {
  height: calc(100vh - 84px);
  position: relative;
  color: #808080;
  h1 {
    text-align: center;
    font-size: 30px;
    font-weight: 800;
    color: white;
  }

  .charts-item {
    height: 100vh;
    background-color: white;
    text-align: center;
  }

  .charts {
    height: 100%;
    width: 100%;
  }

  .home-top {
    position: absolute;
    left: 30px;
    top: 30px;
    width: 150px;

    .top-name {
      font-size: 13px;
      font-weight: 800;
      width: 150px;
    }

    .top-title {
      font-weight: bold;
    }

    .top-item {
      line-height: 26px;
      padding: 0 20px;
      font-size: 14px;
    }
  }
}
</style>

